<template>
	
	<u-popup mode="bottom" v-model="show" safeAreaInsetBottom borderRadius="20" closeable @close="close">
		<view class="pop p30 t-flex colum">
			<view class="title f34 c3 bold t-flex center mb30">完善信息</view>
			
			
			<view class=" c6 mb20">
				头像
			</view>			
			<label for="avatar">
				<image :src="$str.avatar(form.avatar)" mode="aspectFill" class="avatar"></image>
				<button id='avatar' open-type="chooseAvatar" @chooseavatar="chooseavatar" style="display: none;"></button>
			</label>
			
			<input type="nickname" class="input mt30" placeholder="请输入昵称" v-model="form.nickname" />
			
			<view class="btn t-flex center f30 cf mainBC" @click="confirm">保存</view>
		</view>
		
		
		
		
		
	</u-popup>
	
	
	
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue';
import { routeFn, upload } from '../../lib/ts/util';
import { editUserinfo } from '../../api';
import { useStore } from '../../store';
	
	const store = useStore()

	let show = ref(false)
	let opencount = 0
	let open = ()=>{
		show.value = true
		opencount++
	}
	
	let form = reactive({
		avatar:'',
		nickname:''
	})
	
	const close = ()=>{
		setTimeout(()=>{
			if(opencount) routeFn.back()
		},300)
	}
	
	
	const chooseavatar = (e)=>{
		upload(e.detail.avatarUrl).then(res=>{
			form.avatar = res.data.url
		})
	}
	
	const confirm = async ()=>{
		let res =  await editUserinfo(form)
		store.getUserinfo()
		show.value = false
	}
	
	defineExpose({
		open
	})
	
</script>

<style scoped lang="scss">
	.avatar{
		box-shadow: 0 0 10rpx rgba(200,200,200,.3);
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}
	
	.input{
		width: 400rpx;
		background-color: #eee;
		border-radius: 200rpx;
		height: 80rpx;
		text-align: center;
	}
	.btn{
		width: 600rpx;
		height: 80rpx;
		border-radius: 20rpx;
		margin-top:160rpx;
	}

</style>